
<template>
  <BaseCharts :option="option"></BaseCharts>
</template>

<script lang="ts" setup>
import BaseCharts from '../../base/baseCharts.vue';

const dataArr = 60;
const colorSet = {
  color: "#468EFD",
};

const option = computed(() => {
  const data = {
    tooltip: {
      formatter: "{a} <br/>{b} : {c}%",
    },
    series: [
      {
        name: "",
        type: "gauge",
        radius: "55%",
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            color: [
              [dataArr / 100, colorSet.color],
              [1, "#111F42"],
            ],
            width: 8,
          },
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        detail: {
          formatter: function (value: number) {
            if (value !== 0) {
              const num = Math.round(value);
              return num.toFixed(0) + "%";
            } else {
              return 0;
            }
          },
          offsetCenter: [0, 82],
          padding: [0, 0, 0, 0],
          fontSize: 18,
          fontWeight: "700",
          color: colorSet.color,
        },
        title: {
          //标题
          show: true,
          offsetCenter: [0, 46], // x, y，单位px
          color: "#fff",
          fontSize: 14, //表盘上的标题文字大小
          fontWeight: 400,
          fontFamily: "PingFangSC",
        },
        data: [
          {
            name: "title",
            value: dataArr,
          },
        ],
        pointer: {
          show: true,
          length: "75%",
          radius: "20%",
          width: 10, //指针粗细
        },
        animationDuration: 4000,
      },
      {
        name: "外部刻度",
        type: "gauge",
        radius: "80%",
        min: 0, //最小刻度
        max: 100, //最大刻度
        splitNumber: 10, //刻度数量
        startAngle: 225,
        endAngle: -45,
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: [[1, "rgba(0,0,0,0)"]],
          },
        }, //仪表盘轴线
        axisLabel: {
          show: true,
          color: "#4d5bd1",
          distance: 25,
          formatter: function (v: string) {
            switch (v + "") {
              case "0":
                return "0";
              case "10":
                return "10";
              case "20":
                return "20";
              case "30":
                return "30";
              case "40":
                return "40";
              case "50":
                return "50";
              case "60":
                return "60";
              case "70":
                return "70";
              case "80":
                return "80";
              case "90":
                return "90";
              case "100":
                return "100";
            }
          },
        }, //刻度标签。
        axisTick: {
          show: true,
          splitNumber: 7,
          lineStyle: {
            color: colorSet.color, //用颜色渐变函数不起作用
            width: 1,
          },
          length: -8,
        }, //刻度样式
        splitLine: {
          show: true,
          length: -20,
          lineStyle: {
            color: colorSet.color, //用颜色渐变函数不起作用
          },
        }, //分隔线样式
        detail: {
          show: false,
        },
        pointer: {
          show: false,
        },
      },
    ],
  }
  return data
})
</script>

<style scoped lang="scss"></style>
